// 通过判断参数为true或false来实现登录或未登录的效果
<template>
  <div>
    <!-- ======================= -->
    <!-- 底部中的头部也就是轮播图 -->
    <el-header style="width: 100%; height: 350px; background-color: ">
      <template>
        <el-carousel
          :interval="5000"
          arrow="always"
          style="width: 1500px; margin: auto"
        >
          <el-carousel-item v-for="item in 4" :key="item">
            <img
              width="100%"
              height="100%"
              :src="exhibition[item - 1]"
              alt=""
            />
            <!-- <h3>{{ item }}</h3> -->
          </el-carousel-item>
        </el-carousel>
      </template>
    </el-header>

    <!-- 底下的内容 -->
    <el-footer id="fenlei" style="width: 100%; heith: 100%; background-color: ">
      <!--左边的分类  -->
      <el-aside
        style="display: inline-block;float: left; width:300px;heith:500px; background-color"
      >
        <el-col :span="20">
          <h5 style="background-color: #fffbe8">公告</h5>
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-menu-item index="1">
              <i class="el-icon-menu"></i>
              <span slot="title">分类</span>
            </el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">电子类</span>
            </el-menu-item>
            <el-menu-item index="3">
              <i class="el-icon-document"></i>
              <span slot="title">男装</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">水果类</span>
            </el-menu-item>

            <el-menu-item index="5">
              <i class="el-icon-setting"></i>
              <span slot="title">家居</span>
            </el-menu-item>
            <el-menu-item index="6">
              <i class="el-icon-setting"></i>
              <span slot="title">肉禽类</span>
            </el-menu-item>
            <el-menu-item index="7">
              <i class="el-icon-setting"></i>
              <span slot="title">鞋子</span>
            </el-menu-item>
            <el-menu-item index="8">
              <i class="el-icon-setting"></i>
              <span slot="title">蔬菜类</span>
            </el-menu-item>
            <el-menu-item index="9">
              <i class="el-icon-setting"></i>
              <span slot="title">新分类</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-aside>
      <!-- 右边的具体内容 -->
      <el-main style="width: 60%">
        <div class="demo-image" style="height: 350px;" v-for="(fits,key) in class_data" :key="key">
          <p class="home-classification">{{fits.class}}</p>
          <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
          <div
            class="block"
            style="float: left; width: 200px; height: 220px; margin: 0 10px"
            v-for="(fit,key) in fits.fits"
            :key="key"
          >
            <el-image
              style="
                width: 200px;
                height: 200px;
                box-shadow: 0px 0px 1px 1px rgb(222, 233, 233);
              "
              :src="fit['url']"
              :fit="fit['url']"
              @click="details(fit)"
            >
            </el-image>
            <span class="demonstration">{{ fit['name'] }}</span>
            <!-- 接下来是价格 -->
            <div v-if="fit['discount']===1"><h3>￥{{primary}}</h3></div>
            <div v-else>
              <p style="display:inline-block;text-decoration: line-through">￥{{fit['primary']}}</p>
              <h4 style="display:inline-block">￥{{(fit['primary']*fit['discount']).toFixed(2)}}</h4>
            </div>
          </div>
        </div>


      </el-main>
    </el-footer>
  </div>
</template>


<script>
export default {
  data() {
    return {
        exhibition:[
              'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=209526487,1817825372&fm=26&gp=0.jpg',
              'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1478620944,3833876821&fm=26&gp=0.jpg',
              'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2795602166,2933209087&fm=26&gp=0.jpg',
              'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1303767483,2019555443&fm=26&gp=0.jpg',
            ],
            class_data:[
              {
                class:"水果类",
                fits:[
                  {
                    name:'测试1',
                    url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                    primary:88,
                    discount:0.8,  
                  },
                  {
                    name:'测试2',
                    url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                    primary:56,
                    discount:0.8,  
                  },
                  {
                    name:'测试3',
                    url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                    primary:954,
                    discount:0.8,  
                  }
                ]
              },
              {
                class:"蔬菜类",
                fits:[
                  {
                    name:'测试1',
                    url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                    primary:88,
                    discount:0.8,  
                  },
                  {
                    name:'测试2',
                    url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                    primary:56,
                    discount:0.8,  
                  },
                  {
                    name:'测试3',
                    url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                    primary:954,
                    discount:0.8,  
                  }
                ]
              },{
                class:"肉禽类",
                fits:[
                  {
                    name:'测试1',
                    url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                    primary:88,
                    discount:0.8,  
                  },
                  {
                    name:'测试2',
                    url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                    primary:56,
                    discount:0.8,  
                  },
                  {
                    name:'测试3',
                    url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                    primary:954,
                    discount:0.8,  
                  }
                ]
              }



            ],
      }
        
        
  },
  methods:{
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      // 点击图片跳转到详情页面
      details(data) {
        this.$emit('details',data);
      },
  }
};
</script>

<style>
/* 分类下每个产品里面的组件居中 */
.demo-image{
  text-align: center;
}

/* 分类标题 */
.home-classification{
  text-align: left;
}
</style>